<html>
    <head>
        <meta charset="utf-8">
        <title>大风车</title>
        <style>
            /*main主要的，以下内容是对body里main内容的属性定义*/
            main
            {
                /*width宽*/
                width:1300px;
                /*height高*/
                height:500px;
                /*背景-图片：使用插入*/
                background-image:url(caodi.png);
                /*背景-尺寸:适应*/
                background-size:contain;
                /*最小-宽度*/
                min-width:1300px;
                /*定位方式：相对定位，但不指定位置*/
                position:relative;
            }
            /*以下是对body的属性定义，如不定义，body既是main所包含的内容*/
            body
            {
                /*高100%，即body内容扩展到整个界面，不仅仅是main*/
                height:100%;
                /*显示：弹性，即body里的内容可以改变，是属性修改的开关*/
                display:flex;
                /*水平方向：居中对齐*/
                justify-content:center;
                /*竖直方向：居于底部对齐*/
                align-items:flex-end;
                /*边缘间距：0*/
                margin:0px;
            }
            div
            {
                width:350px;
                height:350px;
                background-image:url(fengche.png);
                background-size:contain;
                /*定位方式：绝对定位，此为以main左上角为原点*/
                position:absolute;
                /*从左向右移动*/
                left:265px;
                /*从上向下*/
                top:50px;
                /*动画-名称*/
                animation-name:one;
                /*动画-运行一个完整过程时间*/
                animation-duration:4s;
                /*动画-运行方式：无限循环*/
                animation-iteration-count:infinite;
                /*动画-运行速度：匀速*/
                animation-timing-function:linear;
            }
            /*div指相同一类，child孩子，这里为子标签
            只要将不同部分表示出来就可以*/
            div:nth-child(1)
            {
                 width:150px;
                height:150px;
                left:590px;
                top:278px;
                animation-duration:2s;
            }
             div:nth-child(2)
            {
                 width:250px;
                height:250px;
                left:730px;
                top:190px;
                animation-duration:3s;
            }
            /*以下为动画设定参数过程*/
            @keyframes one
            {
                /*0%为起始位置，100%结束*/
                0%
                {
                    transform:rotate(0deg);
                }
                100%
                {
                    transform:rotate(360deg);
                }
            }
            /*hover当鼠标移到div范围内*/
            div:hover
            {
                animation-duration:0.2s

            }
            /*当鼠标点击div方位时*/
            div:active
            {
                animation-name:none;
            }
        </style>
    </head>
    <body>
        <main>
            <!--有几个div模块，就要写几个，依次对应-->
            <div></div>
            <div></div>
            <div></div>
        </main>
    </body>
</html>